<template>
  <el-table :data="menulist" border style="width: 100%" row-key="id" >
    <el-table-column prop="id" label="菜单编号" width="120"></el-table-column>
    <el-table-column prop="title" label="菜单名称" width="180"> </el-table-column>
    <el-table-column prop="pid" label="上级菜单"> </el-table-column>
    <el-table-column prop="icon" label="菜单图标">
        <template slot-scope="scope">
            <i :class="scope.row.icon"></i>      
        </template>
         </el-table-column>
    <el-table-column prop="url" label="菜单地址"> </el-table-column>
    <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.status==1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
        </template>
         </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" 
        type="primary"
        @click="edit(scope.row.id)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="del(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {getMenu,delMenu} from "../../util/axios"
export default {
  data() {
    return {
      menulist: [],
    };
  },
  mounted(){
     this.getmenulist();
  },
  methods:{
    //编辑功能
     edit(id){
        this.$emit("edit",id);
     },
      getmenulist(){
       getMenu({istree:true}).then(res=>{
         if(res.code == 200){
             this.menulist = res.list
         }
     })
   },
     //删除功能
     del(id){
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delMenu({id}).then(res=>{
             if(res.code == 200){
               this.$message.success(res.msg)
               this.getmenulist();
             }else{
               this.$message.error(res.msg)
             }
            
           })
        }).catch(() => {
          this.$message.info("已取消删除")       
        });
    } 
  }
};
</script>

<style lang="stylus" scoped>

</style>